<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="s"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<link href="<c:url value="/resources/css/common.css" />" rel="stylesheet">
<s:web pageName="car_price">
<jsp:attribute name="headPart">
	<title>车价查询</title>
	<link href="<c:url value="/resources/css/common.css" />" rel="stylesheet">
	<link href="<c:url value="/resources/select2/select2.min.css" />" rel="stylesheet">
	<style>
		/* car price result */
		
		.image-text{
			color: red;
			font-size: 50px;
			font-weight: bold;
			position: relative;
			top: 30px;
			left: 80px;
		}
	</style>
	
	<script src="<c:url value="/resources/select2/select2.full.min.js" />"></script>
	<script>
		//plain
		var _area = '${area}';
		var _selects = ["brand", "model", "build"];
		var toInit = true;
		function _populate(level, data){
			var ops = [];
			for(var i = 0; i < data.length; i++){
				var item = data[i];
				ops.push("<option value='"+item.id+"'>"+item[_selects[level]]+"</option>");
			}
			var select = $("#" + _selects[level]);
			select.html(ops.join());
			if(toInit === true){
				if(level == 0){
					<c:if test="${not empty brand}">
					select.val("${brand}");
					</c:if>
				}
				else if(level == 1){
					<c:if test="${not empty model}">
					select.val("${model}");
					</c:if>
				}
				else if(level == 2){
					<c:if test="${not empty build}">
					select.val("${build}");
					</c:if>
				}
			}
			select.change();
		}
	
		function _select(level){
			var parent = 0;
			if(level > 0){
				parent = $('#' + _selects[level - 1]).val();
			}
			if(level == 0 || parent){
				$.get("<c:url value="/price2/getCategories"/>", {
					parent: parent,
					level: level
				}, function(data){
					_populate(level, data);
				})
			}
		}
		
		function _getCities(){
			$.get("<c:url value="/areas"/>", function(data){
				
				//re-group
				var p = [];
				var cc = [];
				var cIndex = 0;
				var array = p;
				var curParent = 1;
				while(true){
					var item = data.shift();
					if(item == null){
						break;
					}
					if(curParent != item.parent){
						curParent = item.parent;
						array = cc[cIndex ++] = [];
					}
					array.push(item);
				}
				
				//html
				var html = [];
				for (var i = 0; i < cc.length; i++) {
					var c = cc[i];
					if(c.length == 1){
						var _c = c[0];
						if(_c.id == _area){
							html.push('<option selected="selected" value="' + _c.id + '" py="' + _c.pinyin + '" >'+ _c.name + '</option>');
						}else{
							html.push('<option value="' + _c.id + '" py="' + _c.pinyin + '" >'+ _c.name + '</option>');
						}
					}else{
						var _p = p[i];
						html.push('<optgroup value="' + _p.id + '" py="' + _p.pinyin + '" label="' + _p.name + '">');
						for (var j = 0; j < c.length; j++) {
							var _c = c[j];
							if(_c.id == _area){
								html.push('<option selected="selected" value="' + _c.id + '" py="' + _c.pinyin + '" >'+ _c.name +'</option>');
							}else{
								html.push('<option value="' + _c.id + '" py="' + _c.pinyin + '" >'+ _c.name +'</option>');
							}
						}
						html.push('</optgroup>');
					}
				}
				
				var matcher = function(key, py){
					if(key == null || key == ''){
						return true;
					}
					if(py.indexOf(key.toLowerCase()) > -1){
						return true;
					}
					return false;
				}
				
				$('#area').html(html.join('\n')).select2({
				    matcher: function(params, data){
						var match = $.extend(true, {}, data);
						
					     if (params.term == null || $.trim(params.term) === '') {
					       return match;
					     }
					
					     if (matcher(params.term, data.element.getAttribute('py'), data)) {
					       return match;
					     }
					     
					     if (data.children) {
					       for (var c = data.children.length - 1; c >= 0; c--) {
					         var child = data.children[c];
					
					         // Check if the child object matches
					         // The old matcher returned a boolean true or false
					         var doesMatch = matcher(params.term, child.element.getAttribute('py'), child);
					
					         // If the child didn't match, pop it off
					         if (!doesMatch) {
					           match.children.splice(c, 1);
					         }
					       }
					
					       if (match.children.length > 0) {
					         return match;
					       }
					     }
					
					     return null;
					}
				})
			});
		}
		
		$(function(){
			_getCities();
			_select(0);
			<c:if test="${not empty mileage}">
				$("#mileage").val(${mileage});
			</c:if>
		})
		
		
	</script>
</jsp:attribute>
<jsp:body>
<div class="row main">
	<div class="page-image-header col-md-offset-1">
		<div class="image-text">车价</div>
		<div>
			<img src="<c:url value="/resources/images/jetta-s.png" />">
		</div>
	</div>
	<form id="priceForm1" method="POST" action="pr">
		<div class="form-horizontal">
			<div class="form-group">
				<div class="col-md-offset-3" style="font-size: 20px; color:red; font-weight: bold;">汽车价格查询</div>
			</div>
			<div class="form-group">
				<label class="control-label col-md-3">品牌</label>
				<div class="col-md-4">
					<select id="brand" name="brand" class="form-control" onchange="_select(1)">
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-md-3">型号</label>
				<div class="col-md-4">
					<select id="model" name="model" class="form-control" onchange="_select(2)">
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-md-3">制造年份</label>
				<div class="col-md-4" onchange="_select(3)">
					<select id="build" name="build" class="form-control">
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-md-3">城市</label>
				<div class="col-md-4">
					<select id="area" name="area" class="form-control">
					</select>
				</div>
			</div>
			
			<div class="form-group">
				<div class="col-md-offset-3" style="color:blue;">以下可选</div>
			</div>
			<div class="form-group">
				<label class="control-label col-md-3">里程数(公里)</label>
				<div class="col-md-4">
					<input id="mileage" name="mileage" class="form-control">
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-md-3">排气量(L)</label>
				<div class="col-md-4">
					<input id="volume" name="volume" class="form-control">
				</div>
			</div>
			
			<div class="col-md-8 text-right">
	    		<button type="submit" class="btn btn-danger btn-lg">
	    			<span class="glyphicon glyphicon-search"></span> 查询
	    		</button>
	    	</div>
		</div>
	</form>
</div>
</jsp:body>
</s:web>
